/**
 * 图表基础类, 不可直接使用. 用于提供图表基本配置
 */

import React from 'react';
import { findDOMNode } from 'react-dom';
import merge from 'lodash/object/merge';
import isEqual from 'lodash/lang/isEqual'
import Highcharts from 'Highcharts';

export default class BaseChart extends React.Component {
	static propTypes = {
		// 主标题
		title: React.PropTypes.string,
		// 副标题
		subtitle: React.PropTypes.string,
		// Y轴标题
		yAxisTitle: React.PropTypes.string,
		// X轴类别
		categories: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
		// 数据
		series: React.PropTypes.arrayOf(React.PropTypes.shape({
			// 数据组名
			name: React.PropTypes.string,
			// 数据内容
			data: React.PropTypes.array
		})).isRequired
	};

	// 基本配置
	baseConfig = {};

	static defaultProps = {
		title: '基础图',
		subtitle: '请通过继承的方式实现需要的图表',
		yAxisTitle: '描述',
		canUpdate: true
	};

	constructor(props, config) {
		super(props);

		this.baseConfig = merge({}, config);
	}

	componentDidUpdate(prevProps, prevState) {
		// 尝试重绘图表
		let { title, subtitle, yAxisTitle, categories, series, height } = this.props;
		let domNode = findDOMNode(this.refs.chartContainer);
		// 合并默认配置和用户配置
		let config = merge({}, this.baseConfig, 
			{ 
				chart: {
					height
				},
				title: { text: title }, 
				subtitle: { text: subtitle },
				yAxis: {
					title: {
						text: yAxisTitle
					}
				},
				xAxis: {
					categories,
				},
				series
			});
		// 构建图表
		Highcharts.chart(domNode, config);
	}

	shouldComponentUpdate(nextProps, nextState) {
		// 阻止刷新其他不可见图表
		let { canUpdate } = nextProps;

		canUpdate = canUpdate === undefined ? true : canUpdate;

		// 判断是否需要重绘图表
		return canUpdate && !(isEqual(this.props.categories, nextProps.categories)
			&& isEqual(this.props.series, nextProps.series));
	}

	render() {
		return (
			<div ref='chartContainer'></div>
		)
	}
}